{extend name="common:base"}
{block name="body"}
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href=""><cite>权限</cite></a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5" method="post">
                        <div class="layui-inline layui-show-xs-block">
                            <select name="pid" lay-verify="required">
                                <option value=""></option>
                                <option value="0">顶级分类</option>
                                {volist name="parent" id="vo"}
                                <option value="{$vo.id}">{$vo.name}</option>
                                {/volist}
                            </select>
                        </div>
                        <div class="layui-inline layui-show-xs-block" style="width: 200px">
                            <input type="text" name="name" required lay-verify="required" placeholder="权限名称"
                                   autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-input-inline layui-show-xs-block" style="width: 250px">
                            <input type="text" name="handler" placeholder="权限节点(顶级分类时权限节点不用填)" autocomplete="off"
                                   class="layui-input">
                        </div>

                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit lay-filter="add"><i class="layui-icon"></i>增加</button>
                        </div>
                    </form>
                </div>
                <!--                <div class="layui-card-header">-->
                <!--                    <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>-->
                <!--                </div>-->
                <div class="layui-card-body ">
                    <table class="layui-table layui-form" id="tree-table">
                    </table>
                </div>
                <!--<div class="layui-card-body">
                    <div class="page" id="page"></div>
                </div>-->
            </div>
        </div>
    </div>
</div>
{/block}
{block name="javascript"}
<script>
    layui.config({
        base: '__admin__/extend/',
    });
    layui.use(['treeTable', 'layer', 'form', 'laypage'], function () {
        const $ = layui.jquery,
            form = layui.form,
            layer = layui.layer,
            treeTable = layui.treeTable,
            laypage = layui.laypage;
        treeTable.render({
            elem: '#tree-table',
            url: '{:url(\'permission_list\')}',
            icon_key: 'name',
            is_checkbox: true,
            end: function (e) {
                form.render();
            },
            cols: [
                {
                    key: 'name',
                    title: '名称',
                    width: '220px',
                    template: function (item) {
                        return '<span>' + item.name + '</span>';
                    }
                },
                {
                    key: "handler",
                    title: "权限节点",
                    width: '220px',
                },
                {
                    key: 'create_time',
                    title: '创建日期',
                    width: '130px',
                },
                {
                    key: 'update_time',
                    title: '更新时间',
                    width: '130px',
                },
                {
                    title: '状态',
                    width: '100px',
                    align: 'center',
                    template: function (item) {
                        if (item.status === 1){
                            return '<input type="checkbox" name="status" class="status" lay-skin="switch" lay-text="正常|禁用" value=\'1\' checked>';
                        } else{
                            return '<input type="checkbox" name="status" class="status" lay-skin="switch" lay-text="正常|禁用" value=\'0\'>';
                        }
                    }
                },
                {
                    title: '操作',
                    align: 'center',
                    template: function (item) {
                        if(item.level === 0){
                            return '<span style="color:red;">'+item.name+'</span>';
                        }
                        return '<a title="编辑" href="javascript:;" onclick="edit_permission(this,' + item.id + ')" class="edit" >编辑</a>';
                    }
                }
            ]
        });
        form.on('submit(add)', function (data) {
                $.ajax({
                    url: '{:url(\'add_permission\')}',
                    type: 'POST',
                    data: data.field,
                    success: function (result) {
                        if (result.status === 1) {
                            layer.msg(result.message, {icon: 6, time: 1000}, function () {
                                xadmin.father_reload();
                            });
                        } else {
                            layer.msg(result.message, {icon: 5, time: 2000});
                        }
                    }
                }, 'JSON');
                return false;
            }
        );

        // // 监听展开关闭
        /*treeTable.on('tree(flex)',function(data){
            layer.msg(JSON.stringify(data));
        });*/
        $('.status').click(function () {
            const status=$('.status').value;
            console.log(status);
        });
    });

    /*用户-停用*/
    function member_stop(obj, id) {
        layer.confirm('确认要停用吗？', function (index) {

            if ($(obj).attr('title') === '启用') {

                //发异步把用户状态进行更改
                $(obj).attr('title', '停用');
                $(obj).find('i').html('&#xe62f;');

                $(obj).parents("tr").find(".td-status").find('span').addClass('layui-btn-disabled').html('已停用');
                layer.msg('已停用!', {icon: 5, time: 1000});

            } else {
                $(obj).attr('title', '启用');
                $(obj).find('i').html('&#xe601;');

                $(obj).parents("tr").find(".td-status").find('span').removeClass('layui-btn-disabled').html('已启用');
                layer.msg('已启用!', {icon: 5, time: 1000});
            }

        });
    }

    /*用户-删除*/
    function member_del(obj, id) {
        layer.confirm('确认要删除吗？', function (index) {
            //发异步删除数据
            $(obj).parents("tr").remove();
            layer.msg('已删除!', {icon: 1, time: 1000});
        });
    }

    function edit_permission(obj, id) { /* 这个地方的url要注意，理想是弄成{：url()}生成方式*/
        xadmin.open('编辑', "{:url('edit_permission')}"+"?id=" + id,);
    }


    function delAll(argument) {

        var data = tableCheck.getData();

        layer.confirm('确认要删除吗？' + data, function (index) {
            //捉到所有被选中的，发异步进行删除
            layer.msg('删除成功', {icon: 1});
            $(".layui-form-checked").not('.header').parents('tr').remove();
        });
    }
</script>
{/block}